<template>
  <div class="home">
    <ul>
      <!-- <router-link tag="li" v-for="item in arr" :key="item.Id" :to="'/detail?id=' + item.Id" >{{item.Name}}</router-link> -->
     <!-- path和name都可以和query合作传递参数 query路由跳转中携带参数的一种方式 他的参数是以key=value的形式表现路由地址上 -->
     <!-- 
       name也可以用来跳转页面
       name可以和query和params合作传递参数
       path 和 params合作参数丢失 不建议使用
       params传递的参数不会显示在路由地址上 所以更安全 但是刷新后参数丢失
       query携带的参数会直接显示在路由地址上 所以不安全 但是参数不会因为页面刷新丢失
       这种以router-link跳转路由的方式叫声明式路由
      -->
      <!-- <router-link tag="li" v-for="item in arr" :key="item.Id" :to="{
        name: 'detail',
        params: {
          id: item.Id
        }
      }" >{{item.Name}}</router-link> -->
      <li v-for="item in arr" :key="item.Id" @click="goDetial(item.Id)">{{item.Name}}</li>
    </ul>
    <button @click="go">前进</button>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      arr:  [{
        "Id": "k20bch0538g300a382a907y",
        "Code": "2020[36]",
        "SalerMember": "",
        "Name": "鸿富锦精密电子（郑州）有限公司聚对苯二甲酸乙二酯、聚苯乙烯材质托盘破碎料转让公告结果公示",
        "CreateTime": "2020-11-12 17:05:38",
        "FinalPrice": 0.0
      }, {
        "Id": "k20bce3535gg00a391d84cd",
        "Code": "2020[36]",
        "SalerMember": "",
        "Name": "鸿富锦精密电子（郑州）有限公司聚对苯二甲酸乙二酯、聚苯乙烯材质托盘破碎料转让公告结果公示",
        "CreateTime": "2020-11-12 14:35:35",
        "FinalPrice": 0.0
      }, {
        "Id": "k2099f4210bh20a390c78w7",
        "Code": "2020[2]",
        "SalerMember": "",
        "Name": "河南裕展精密科技有限公司废铅酸蓄电池转让公告结果公示",
        "CreateTime": "2020-09-09 15:42:10",
        "FinalPrice": 0.0
      }, {
        "Id": "k207sg00431u00a391bd03j",
        "Code": "2020[6]",
        "SalerMember": "",
        "Name": "河南裕展精密科技有限公司废铝屑等一批工业废料转让公告结果公示",
        "CreateTime": "2020-07-28 16:00:43",
        "FinalPrice": 0.0
      }, {
        "Id": "k207sg0034bo00a391bd0f3",
        "Code": "2020[8]",
        "SalerMember": "",
        "Name": "鸿富锦精密电子（郑州）有限公司废纸皮、塑料膜、泡棉、废杂铁&碎纸制料带、废外保护膜、废纸片、PET衬背等废料转让公告结果公示",
        "CreateTime": "2020-07-28 16:00:34",
        "FinalPrice": 0.0
      }, {
        "Id": "k207oc3734ir00a381e2816",
        "Code": "2020[7]",
        "SalerMember": "",
        "Name": "河南裕展精密科技有限公司废铝屑(含废塑胶) (需甩干)、废不锈钢片(304) 、废不锈钢片(301)、不锈钢屑(需甩干)、铝合金边角料等一批工业废料转让公告结果公示",
        "CreateTime": "2020-07-24 12:37:34",
        "FinalPrice": 0.0
      }, {
        "Id": "k207oc3722bm00a381e286g",
        "Code": "2020[9]",
        "SalerMember": "",
        "Name": "鸿富锦精密电子（郑州）有限公司废聚苯乙烯、聚丙烯、PET、PET/EVA材质胶盘等废料转让公告结果公示",
        "CreateTime": "2020-07-24 12:37:22",
        "FinalPrice": 0.0
      }, {
        "Id": "k207de2856dg00a38099c2l",
        "Code": "2020[3]",
        "SalerMember": "",
        "Name": "鸿富锦精密电子（郑州）有限公司废不锈钢材、废塑胶、废铝材、废碎玻璃、废钛制螺母等一批残次品转让公告结果公示",
        "CreateTime": "2020-07-13 14:28:56",
        "FinalPrice": 0.0
      }, {
        "Id": "k207de2833l600a38099cbj",
        "Code": "2020[4]",
        "SalerMember": "",
        "Name": "河南裕展精密科技有限公司废不锈钢材、废塑胶、废铝材、废碎玻璃、废钛制螺母等一批残次品转让公告结果公示",
        "CreateTime": "2020-07-13 14:28:33",
        "FinalPrice": 0.0
      }, {
        "Id": "k201dg05102j00a380e182j",
        "Code": "2019[6]",
        "SalerMember": "",
        "Name": "河南裕展精密科技有限公司废铝屑(含废塑胶) 、废不锈钢片、不锈钢屑等一批工业废料转让公告结果公示",
        "CreateTime": "2020-01-13 16:05:10",
        "FinalPrice": 0.0
      }]
    }
  },

  methods: {
    goDetial(id) {
      // console.log(this)
      // this.$router 路由跳转方法的对象
      // push 的值是path地址或者路由对象的名称时可以直接进行页面跳转
      // this.$router.push('detail')
      // this.$router.push 跳转页面时如果参数是对象 则规则和声明式路由一样
      this.$router.push({
        path: '/detail',
        query: {
          id: id
        }
      })
    },

    go() {
      this.$router.go(1)
    }
  }
}
</script>
<style lang="scss" scoped>
    li{

      height: 90px;
      border-top: 1px solid #333;
      line-height: 30px;
    }
</style>
